<template>
  <el-table :data="staffList" style="width: 100%" @expand-change="getDetail">
    <el-table-column type="expand">
      <template #default="scope" :name="scope">
        <el-form
          label-position="left"
          class="demo-table-expand"
          ref="msgForm"
          style="padding: 10px 40px"
        >
          <el-form-item label="本月注册商家"> </el-form-item>
          <el-form-item label="本月激活商家"> </el-form-item>
          <el-form-item label="本月订单总数"> </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="商务人员名称"> </el-table-column>
    <el-table-column prop="phone" label="商务人员电话"> </el-table-column>
    <el-table-column prop="createDate" label="创建时间"> </el-table-column>
  </el-table>
</template>

<script>
export default {
  mounted: async function () {
    let res = await this.$http.get("/staff/getStaff");
    // console.log(res);
    this.staffList = res.data.object;
  },
  data() {
    return {
      staffList: [],
      expanded: [],
      staffData: {},
    };
  },
  methods: {
    getDetail: async function (row, expandedRows) {
      let res = await this.$http.get(
        "/staff/staffCommission?phone=" + row.phone
      );
      console.log(res);
    },
  },
};
</script>

<style>
.el-form-item__label {
  color: #99a9bf;
}
</style>
